<template>
  <view class="employee-detail-page" style="background: linear-gradient(to bottom, #f5f9ff, #e6f0ff); min-height: 100vh;">
    <!-- 标题栏 -->
    <view style="padding: 15px; position: relative; border-bottom: 1px solid #eee;">
      <text style="font-size: 18px; font-weight: bold; display: block; text-align: center;">员工信息</text>
    </view>

    <!-- 员工主要内容 -->
    <view style="padding: 30px 15px; text-align: center;">
      <!-- 员工头像 -->
      <view style="width: 80px; height: 80px; background-color: #e6f0ff; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 15px;">
        <text style="color: #1a73e8; font-size: 24px;"></text>
      </view>
      
      <!-- 员工姓名 -->
      <view style="display: flex; justify-content: center; align-items: center; margin-bottom: 30px;">
        <text style="font-size: 18px; font-weight: bold; margin-right: 10px;">王丽丽</text>
        <view style="width: 16px; height: 16px; position: relative;">
          <view style="position: absolute; top: 0; left: 0; width: 14px; height: 14px; border: 1px solid #666; border-radius: 2px;"></view>
          <view style="position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border: 1px solid #666; border-radius: 2px;"></view>
        </view>
      </view>
      
      <!-- 员工信息列表 -->
      <view style="background-color: #fff; border-radius: 8px; padding: 0 15px; margin-bottom: 20px;">
        <view style="display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #f5f5f5;">
          <text style="font-size: 14px; color: #999;">工号</text>
          <text style="font-size: 14px; color: #333;">0001</text>
        </view>
        <view style="display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #f5f5f5;">
          <text style="font-size: 14px; color: #999;">岗位</text>
          <text style="font-size: 14px; color: #333;">收银员</text>
        </view>
        <view style="display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #f5f5f5;">
          <text style="font-size: 14px; color: #999;">部门</text>
          <text style="font-size: 14px; color: #333;">营业部</text>
        </view>
        <view style="display: flex; justify-content: space-between; padding: 15px 0;">
          <text style="font-size: 14px; color: #999;">手机号</text>
          <text style="font-size: 14px; color: #333;">182-9887-2222</text>
        </view>
      </view>
      
      <!-- 删除按钮 -->
      <view 
        style="border: 1px solid #1a73e8; border-radius: 8px; padding: 15px; margin: 0 20px; text-align: center;"
        @click="confirmDelete">
        <text style="color: #1a73e8; font-size: 16px; font-weight: bold;">删除</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack()
    },
    confirmDelete() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该员工信息吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    }
  }
}
</script>

<style>
.employee-detail-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>